import React from 'react'
import { Menu } from 'antd';
import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}

const items = [
    getItem('首页', '/home', <AppstoreOutlined />),
    getItem('系统管理', 'sub2', <SettingOutlined />, [
        getItem('菜单管理', '/menu'),
        getItem('角色管理', '/role'),
        getItem('管理员管理', '/user'),
    ]),
    getItem('商城管理', 'sub3', <MailOutlined />, [
        getItem('商品分类', '/cate'),
        getItem('商品规格', '/specs'),
        getItem('商品管理', '/goods'),
        getItem('会员管理', '/number'),
        getItem('轮播图管理', '/banner'),
        getItem('秒杀活动', '/seckill'),
    ]),
];


export default function VNav() {
    const Navigate = useNavigate()
    const Location = useLocation()
    // console.log(Location, '11111');
    let [selectedKey] = useState(['/home'])
    const onClick = (e) => {
        console.log('click ', e);
        Navigate('/index' + e.key)
    };
    return (
        <div>
            <Menu
                defaultSelectedKeys={selectedKey}
                selectedKeys={Location.pathname.slice(6)}
                onClick={onClick}
                style={{
                    width: 256,
                    'minHeight': 830
                }}
                mode="inline"
                items={items}
            />
        </div>
    )
}
